以下是基于你的代码结构，修改为展示实时 PM10 和 PM2.5 含量的代码版本。我们将调整数据格式化部分、图表的 seriesField 和 valueKey 配置，以及模拟数据生成逻辑，以适应 PM10 和 PM2.5 的展示需求。

修改后的代码
vue
<template>
  <div>
    <!-- 父子组件传值 -->
    <Title :title="title"></Title>
    <!-- 图表容器 -->
    <div ref="dualLineChart" style="height: 300px; margin-top: 15px;"></div>
  </div>
</template>
 
<script>
// 引入折线图构造函数 Line
import { Line } from '@antv/g2plot';
// 引入get请求
import { get } from '../../utils/request';
// 从公共仓库获取ed数据(工程数据和设备数据)
import { mapState } from 'vuex';
// 引入moment
import moment from 'moment';
 
const seriesKey = 'series';
const valueKey = 'value';
 
export default {
  data() {
    return {
      title: '实时PM10与PM2.5含量曲线',
      params: {
        page: 1,
        pageSize: 51,
      },
      // 存放原始数据数组
      rawData: [],
      // 声明图表实例
      lineChart: null,
    };
  },
  computed: {
    ...mapState(['ed']),
  },
  watch: {
    ed: {
      handler(newVal) {
        this.params.device_id = newVal.device_id;
        this.params.engineer_id = newVal.engineer_id;
        // 根据设备变化重新获取数据
        this.fetchChartData();
      },
      deep: true,
    },
  },
  methods: {
    // 加载图表
    loadLineChart() {
      this.lineChart = new Line(this.$refs.dualLineChart, {
        data: this.formatChartData(this.rawData),
        xField: 'insert_time',
        yField: valueKey,
        seriesField: seriesKey,
        xAxis: {
          label: {
            rotate: -45,
            style: {
              fill: 'white',
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: 'white',
            },
          },
        },
        tooltip: {
          domStyles: {
            'g2-tooltip': {
              backgroundColor: '#147',
              color: 'white',
              fontSize: 14,
            },
          },
        },
        legend: {
          position: 'top',
          itemName: {
            style: {
              fill: 'white',
            },
          },
        },
        smooth: true, // 平滑曲线
        point: {
          size: 5,
          shape: 'circle',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
        animation: {
          appear: {
            animation: 'wave-in',
            duration: 5000,
          },
        },
      });
      this.lineChart.render();
    },
    // 格式化数据为 G2Plot 支持的格式
    formatChartData(data) {
      const result = [];
      data.forEach((d) => {
        result.push({
          ...d,
          [seriesKey]: 'PM10',
          [valueKey]: d.pm10,
          insert_time: d.insert_time,
        });
        result.push({
          ...d,
          [seriesKey]: 'PM2.5',
          [valueKey]: d.pm25,
          insert_time: d.insert_time,
        });
      });
      return result;
    },
    // 获取图表数据
    async fetchChartData() {
      let res = await get('/dashboard/pageQueryTodayData', this.params);
      console.log(res, '获取响应');
      res.data.list.forEach((item) => {
        item.insert_time = moment(item.insert_time).format('HH:mm'); // 格式化时间
      });
 
      // 模拟PM10和PM2.5数据（根据实际字段调整）
      this.rawData = res.data.list.map((item) => ({
        insert_time: item.insert_time,
        pm10: item.pm10 || Math.random() * 100 + 50, // 模拟PM10
        pm25: item.pm25 || Math.random() * 50 + 20, // 模拟PM2.5
      }));
 
      // 更新图表
      if (this.lineChart) {
        this.lineChart.changeData(this.formatChartData(this.rawData));
      } else {
        this.loadLineChart();
      }
    },
  },
  async mounted() {
    await this.fetchChartData();
  },
};
</script>
 
<style lang="less" scoped>
/* 自定义样式 */
</style>